<template>
  <el-dialog
   :visible.sync="visible"
    width="1024px"
    title="表格列定义"
    :close-on-click-modal="false"
    :modal-append-to-body="true"
    @close="onClose"
  >
    <el-tabs v-model="activeName" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane v-for="(column, index) in addedColumns" :key="index" :label="column.label" :name="index + ''">
        <EditColumn :tableId="tableId" :column="column" />
      </el-tab-pane>
    </el-tabs>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { tableColumnConf } from '@/views/workflow/components/generator/config'
import EditColumn from './components/EditColumn'
export default {
  components: {
    EditColumn
  },
  data() {
    return {
      activeName: '',
      visible: false,
      tableId: '',
      column: {},
      addedColumns: [], // 已添加的列
    }
  },
  watch: {
    
  },
  mounted() {
  },
  methods: {
    /**
     * 显示编辑表格列窗口
     * @param {String} tableId 明细表表名
     * @param {Array} columns 已添加的列
     * @param {number} index 当前编辑的列的索引
     * @returns {void}
     */
    show(tableId, columns, index) {
      this.activeName = index + ''
      this.tableId = tableId
      this.addedColumns = columns
      this.visible = true
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        if (!this.addedColumns) {
          this.addedColumns = []
        }
        const column = JSON.parse(JSON.stringify(tableColumnConf))
        column.label = `列${this.addedColumns.length + 1}`
        const activeName = `${this.addedColumns.length}`
        this.addedColumns.push(column)
        this.activeName = activeName
      }
      if (action === 'remove') {
        this.addedColumns.splice(+targetName, 1)
        this.activeName = +targetName > 0 ? `${+targetName - 1}` : ''
      }
    },
    onClose() {},
    close(e) {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
  cursor: pointer;
}
.option-drag {
  cursor: move;
}
</style>
